<template>
	<!-- 周期购订单订单页面 -->
	<view class="content">
		 <view class="status_bar">
		          <!-- 这里是状态栏 -->
		   </view>
		   <view style="height:100rpx;">
		<view class="topnav">
			<view class="topnav_box">
				<image src="../../static/leftimg.png" class="leftimg" mode="widthFix" @tap="back()"></image>
				周期购订单
				<view  class="loa_hui" @tap="huishou()" 
				:style="{ 'color':(this.lei_li_active == -1 ? 'red' :'#666') }">回收站</view>
			</view>
		</view>
		</view>
		
		<!-- 切换分类 start -->
		<view style="height:80rpx">
		<view class="lei_ul">
			<view :class="[lei_li_active === index ? 'lei_li_active lei_li' : 'lei_li']" v-for="(lei,index) in lei" :key="index" @tap="changelei(index)">
				{{lei}}
			</view>
		</view>
		</view>
		<!-- 切换分类 end -->
		
		<!-- 有订单显示的板块 start -->
		<view class="you_cen" v-if="pancen">
			<view class="list_ul">
				<view class="list_li" v-for="(shop,index) in shop">
					<view class="list_li_sm">
					<view class="list_li_tp">
						<view class="list_li_tp_left">
							 订单号: {{shop.dan}}
						</view>
						<view class="list_li_tp_right">
							{{shop.active}}
							<image src="../../static/rightimg.png" mode="widthFix" class="right_img"></image>
						</view>
					</view>
					<view class="shop_content">
						<view class="shop_content_left">
							<image :src="shop.img"
							mode="widthFix" class="shop_img"></image>
						</view>
						<view class="shop_content_cen">
							<view class="shop_name">
								{{shop.name}}
							</view>
							<view class="shop_slk">{{shop.slk}}</view>
						</view>
						<view class="shop_content_right">
							<view class="shop_money">¥{{shop.money}}</view>
							<view class="shop_num">x{{shop.num}}</view>
						</view>
					</view>
					<view class="jie">
						共{{shop.zongnum}}个商品 实付: <text style="
    color: #ff80c0;">￥{{shop.playmoney}}</text>
					</view>
					<view class="navloa_box" v-if="lei_li_active != -1">
						<navigator url="" hover-class="none" class="navloa_box_a">删除订单</navigator>
						<navigator url="" hover-class="none" class="navloa_box_a navloa_box_a2">评价</navigator>
						<navigator url="" hover-class="none" class="navloa_box_a">查看物流</navigator>
					</view>
					<!-- 回收站显示彻底删除订单 -->
					<view class="navloa_box" v-else>
						<view url=""  class="navloa_box_a">彻底删除订单</view>
					</view>
				</view>
				</view>
			</view>
		</view>
		<!-- 有订单显示的板块 end -->
		
		<!-- 没有订单显示的板块 start -->
		<view class="nocen" v-else>
			<image src="../../static/nolist.png" mode="widthFix" class="nocen_img"></image>
			<view class="nocen_span">您暂时没有任何订单哦！</view>
			<navigator hover-class="none" url="../index/index" open-type="switchTab" class="nocen_loa">去首页逛逛吧</navigator>
		</view>
		<!-- 没有订单显示的板块 end -->
		
		
		<!-- 侧边栏 -->
		<fixce></fixce> 
		<!-- 回到顶部start -->
		<view class="top" :style="{'display':(topState===true? 'block':'none')}">
		<image src="../../static/huitop.png" class="huitop"
		@tap="top()">
		</view>
		</image>
			<!-- 回到顶部end-->
	</view>
</template>

<script>
	import fixce from '../../component/fixce.vue';  //侧边栏组件
	export default{
		components:{
		fixce
		},
		data (){
			return{
				 topState:false,
				 lei_li_active:0,  //默认全部分类
				 lei:['全部','待付款','待发货','待收货','已完成'],
				 pancen:true,  //为true说明有订单，展示有订单页面，反之则无
				 shop:[   //订单集合
					 {
						dan:'ME20200819100621050775',
						active:'待评价',
						img:'http://wx.crh2009.com/attachment/images/2/2020/08/jAH06Q4F2FUHkq2Xja4HRkR143x1d0.jpg?t=fQ9qQ4r2Q7uu9E2QY4q2qqo9KqQ9reRuofy4YYV9Y7w79hVXXK',
						name:'【潮人好物】小熊自动伞22.8元/把（包邮）5种颜色，任你选择，雅致时尚，晴雨两用，体感降温，清凉一夏！',
						slk:'白色',
						money:22.80,
						num:1,
						zongnum:1,
						playmoney:13.80
					 },
					 {
					 						dan:'ME20200819100621050775',
					 						active:'已完成',
					 						img:'http://wx.crh2009.com/attachment/images/2/2020/06/nOoEA6GPDyPQaeQy406pZJ3YEaRQRh.jpg?t=rN2upUMUnbM6xXobqvujJUJdwqVjbMUITpdoJBoEbtnnNUbBmd',
					 						name:'【夏季必备】便携式电风扇26.8元/个包邮，USB接口，立式+夹口二合一，两档网速，还原自然风，360度旋转，稳固超静音！',
					 						slk:' ',
					 						money:26.80,
					 						num:1,
					 						zongnum:1,
					 						playmoney:13.80
					 },
				 ]
			}
		},
		// 回到顶部start
		onPageScroll(e){ //根据距离顶部距离是否显示回到顶部按钮
		    if(e.scrollTop>200){ //当距离大于200时显示回到顶部按钮
		        this.topState = true
		    }else{ //当距离小于200时关闭回到顶部按钮
		        this.topState = false
		    }
		},
		// 回到顶部end
		  onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
		        console.log(option.order); //打印出上个页面传递的参数。改变默认显示哪一板块
				if(option.order == 'daifukuan'){  //待付款板块
					this.lei_li_active=1;
				}
				if(option.order == 'daifahuo'){  //待发货板块
					this.lei_li_active=2;
				}
				if(option.order == 'daishouhuo'){  //待收货板块
					this.lei_li_active=3;
				}
		    },
		methods:{
			top() { //回到顶部
			　　　　uni.pageScrollTo({ 
			　　　　　　scrollTop: 0, duration: 300 
			　　　　}); 
			　　},
			back (){
				uni.switchTab({
				    url: './member'
				});
			},
			changelei (index){  //切换分类,更新shop的值，值为空则无订单，
				this.lei_li_active=index;
				  //此处应请求数据更新shop
				if(this.shop.length!=0){  
					this.pancen=true; //为true说明有订单，展示有订单页面，反之则无
				}else{
					console.log(222)
					this.pancen=false; //为true说明有订单，展示有订单页面，反之则无
				}
			},
			huishou (){  //回收站
				this.lei_li_active=-1;
				//此处应请求数据更新shop
				if(this.shop.length!=0){  
					this.pancen=true; //为true说明有订单，展示有订单页面，反之则无
				}else{
					console.log(222)
					this.pancen=false; //为true说明有订单，展示有订单页面，反之则无
				}
			}
			},
	}
</script>

<style>
	.content{
		width:100%;
		height:100vh;
		background: #f3f3f3;
	}
	.lei_ul{
		width:100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		background-color: #fff;
		position: fixed;
		top:133rpx;
		z-index: 9999;
	}
	/* #ifdef H5 */
	.lei_ul{
		top:100rpx;
	}
	/* #endif */
	.lei_li{
		flex:1;
		padding:20rpx 0;
		color:#666;
		text-align: center;
		font-size: 28rpx;
	}
	.lei_li_active{
		color: #ff80c0;
		border-bottom:4rpx solid #ff80c0;
	}
	.nocen{
		text-align: center;
	}
	.nocen_img{
		width: 270rpx;
		margin:80rpx auto 0;
	}
	.nocen_span{
		color:#999;
		font-size:33rpx;
		margin:30rpx 0;
		text-align: center;
	}
	.nocen_loa{
		border:2rpx solid #ff80c0;
		color:#ff80c0;
		border-radius: 100rpx;
		padding:20rpx 0;
		font-size:33rpx;
		width:40%;
		margin:0 auto;
	}
	.list_ul{
		width:100%;
	}
	.list_li{
		width:100%;
		margin-top:25rpx;
		background-color: #fff;	
	}
	.list_li_sm{
		width:95%;
		margin:0 auto;
	}
	.list_li_tp{
		width:100%;
		padding:20rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx solid #ebebeb;
	}
	.list_li_tp_left{
		color:#666;
		white-space: nowrap;
	}
	.list_li_tp_right{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		color:#ff80c0;
	}
	.right_img{
		width:40rpx;
	}
	.shop_content{
		width:100%;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding:20rpx 0;
	}
	.shop_content_left{
		width:25%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.shop_content_cen{
		width:55%;
	}
	.shop_content_right{
		
	}
	.shop_img{
		width:100%;
	}
	.shop_name{
		width:100%;
		font-size:28rpx;
		    overflow: hidden;
		    text-overflow: ellipsis;
		    display: -webkit-box;
		    -webkit-line-clamp: 2;
		    -webkit-box-orient: vertical;
		    white-space: normal;
	}
	.shop_slk{
		color:#666;
		margin:10rpx 0;
	}
	.shop_money{
		text-align: right;
	}
	.shop_num{
		color:#666;
		text-align: right;
	}
	.jie{
	padding:20rpx 0;
	border-bottom: 2rpx solid #ebebeb;
	border-top: 2rpx solid #ebebeb;
	text-align: right;
	}
	.navloa_box{
		padding:20rpx 0;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.navloa_box_a{
		color:#666;
		border:2rpx solid #666;
		padding:10rpx 20rpx;
		border-radius: 100rpx;
	}
	.navloa_box_a2{
		margin:0 20rpx;
		border:2rpx solid #ff80c0;
		color:#ff80c0;
	}
</style>
